import { useRef, useState, useEffect } from 'react';
import { ProTable } from '@ant-design/pro-components';
import { Button, Select, Modal, Form, Input } from 'antd';
import type { PaginationProps, FormInstance } from 'antd';
import type { ActionType } from '@ant-design/pro-components';
import type { ParamsType } from '@ant-design/pro-components';
import type { ProColumns } from '@ant-design/pro-table';

const { confirm } = Modal;

import styles from './style.less';

interface DetailModelProps {
  visibleDetailModel: boolean;
}

const DetailModel: React.FC<DetailModelProps> = ({ visibleDetailModel }) => {
  const formRef = useRef<FormInstance>();
  const actionRef = useRef<ActionType>();
  const [filterForm] = Form.useForm();
  const [modelNumVisible, setModelNumVisible] = useState<boolean>(false);

  console.log('子组件', visibleDetailModel);

  // useEffect(() => {
  //   useState(visibleDetailModel);
  // }, [visibleDetailModel]);

  useEffect(() => {
    if (visibleDetailModel) {
      setModelNumVisible(visibleDetailModel);
    }
  }, [visibleDetailModel]);

  // const handleNumOK = () => {
  //   filterForm.validateFields().then(async (values) => {
  //     console.log('values==', values);
  //     return;
  //   });
  // };

  const showTotal: PaginationProps['showTotal'] = (t) => `共 ${t} 条`;

  // 获取列表
  // @ts-ignore
  const getPromotionList = async (params: ParamsType) => {
    // const paramsBro = filterForm.getFieldsValue();
    // delete paramsBro.filterType;
    // const { current, ...rest } = params;
    // // filterType
    // const param: any = {
    //   pageNo: current || 1,
    //   pageSize: params.pageSize || 10,
    //   ...rest,
    //   ...paramsBro,
    // };

    // const { code, data, msg } = await couponSearch(param);
    // if (code === 200 && data) {
    //   const { rows, totalCount, pageSize, pageNo } = data;
    //   return {
    //     total: totalCount,
    //     pageSize,
    //     current: pageNo,
    //     data: rows,
    //   };
    // } else {
    //   message.error(msg || '获取列表失败');
    // }
    return {};
  };

  const columns: ProColumns<API.CouponSearchListItem>[] = [
    // 表格
    {
      title: '用户标识',
      dataIndex: 'userCode',
      ellipsis: true,
      width: 180,
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '用户标识',
      dataIndex: 'userCode',
      ellipsis: true,
      width: 180,
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '用户标识',
      dataIndex: 'userCode',
      ellipsis: true,
      width: 180,
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '用户标识',
      dataIndex: 'userCode',
      ellipsis: true,
      width: 180,
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '用户标识',
      dataIndex: 'userCode',
      ellipsis: true,
      width: 180,
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '用户标识',
      dataIndex: 'userCode',
      ellipsis: true,
      width: 180,
      align: 'center',
      hideInSearch: true,
    },
  ];

  const normalQuery = () => {
    actionRef?.current?.reloadAndRest?.();
  };

  const handleToolBar = () => {
    confirm({
      // title: '提醒',
      // icon: <ExclamationCircleOutlined style={{ color: '#3D50D6' }} />,
      content: `确认对该任务中发放失败的用户进行补发？`,
      async onOk() {
        // const params = {
        //   activityIds: record.activityId,
        // };
        // try {
        //   const { code, data } = await profileActivate({ ...params });
        //   if (code === 200 && data) {
        //     message.success('操作成功');
        //     getList();
        //   } else {
        //     // message.error(msg);
        //   }
        // } catch (error) {}
      },
      onCancel() {},
    });
  };

  return (
    <>
      <Modal
        title="任务明细"
        width={820}
        open={modelNumVisible}
        footer={null}
        onCancel={() => {
          setModelNumVisible(false);
        }}
      >
        <div className={styles['filter-body']}>
          <Form
            labelCol={{ span: 6 }}
            form={filterForm}
            initialValues={{
              queryType: 0,
              filterType: 1,
              couponCode: '',
              userCode: '',
              mobile: '',
              orderId: '',
              status: '全部',
            }}
          >
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex' }}>
                <Form.Item label="用户信息" name="orderId" style={{ width: 260, marginRight: 10 }}>
                  <Input placeholder="请输入" autoComplete="off" />
                </Form.Item>
                <Form.Item label="发放状态" name="status" style={{ width: 260, marginRight: 10 }}>
                  <Select
                    options={[
                      { label: '全部', value: '全部' },
                      { label: '未发放', value: '未发放' },
                      { label: '已发放', value: '已发放' },
                      { label: '发放失败', value: '发放失败' },
                    ]}
                  />
                </Form.Item>
              </div>
              <div style={{ display: 'flex' }}>
                <Button
                  style={{ marginRight: 10 }}
                  key="reset"
                  onClick={() => {
                    filterForm.resetFields();
                    actionRef?.current?.reloadAndRest?.();
                  }}
                >
                  重置
                </Button>
                <Button
                  style={{ marginRight: 10 }}
                  type="primary"
                  key="query"
                  onClick={() => {
                    // setQueryText('普通查询');
                    normalQuery();
                  }}
                >
                  查询
                </Button>
              </div>
            </div>
          </Form>
        </div>

        <div>
          <ProTable<API.CouponSearchListItem>
            manualRequest={true}
            rowKey="id"
            columns={columns}
            actionRef={actionRef}
            formRef={formRef}
            request={getPromotionList}
            options={false}
            search={false}
            toolBarRender={() => [
              <Button
                type="primary"
                key="move"
                onClick={() => {
                  handleToolBar();
                }}
              >
                一键补发
              </Button>,
            ]}
            scroll={{ x: 800 }}
            pagination={{
              showSizeChanger: true,
              size: 'small',
              showTotal,
              showQuickJumper: true,
              defaultPageSize: 10,
            }}
          />
        </div>
      </Modal>
    </>
  );
};

export default DetailModel;
